{% extends 'base.html' %}

{% block title %}交易数据汇总 - 区块链交易行为特征分析与可视化系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="fas fa-chart-pie me-2"></i>交易数据汇总</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{{ url_for('export_transactions_summary') }}" class="btn btn-sm btn-outline-primary">
            <i class="fas fa-file-export me-2"></i>导出汇总数据
        </a>
    </div>
</div>

<!-- 汇总统计卡片 -->
<div class="row">
    <div class="col-md-4 mb-4">
        <div class="card border-left-primary h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">总交易数</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_transactions|default(0) }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-exchange-alt fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card border-left-success h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">总交易金额</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_value|default(0)|round(4) }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card border-left-info h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">总地址数</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_addresses|default(0) }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-address-book fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 时间分布图表 -->
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="fas fa-calendar-alt me-2"></i>交易时间分布</h5>
    </div>
    <div class="card-body">
        <canvas id="timeDistributionChart"></canvas>
    </div>
</div>

<!-- 导出选项 -->
<div class="card mb-4">
    <div class="card-header bg-success text-white">
        <h5 class="mb-0"><i class="fas fa-file-export me-2"></i>数据导出选项</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6 mb-3">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fas fa-file-csv me-2 text-primary"></i>导出全部原始数据</h5>
                        <p class="card-text">导出所有原始交易数据为CSV格式，包含每笔交易的详细信息，适合在Excel等电子表格软件中进一步分析。</p>
                        <a href="{{ url_for('export_transactions') }}" class="btn btn-primary">
                            <i class="fas fa-download me-2"></i>导出全部数据
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fas fa-file-csv me-2 text-success"></i>导出汇总分析数据</h5>
                        <p class="card-text">导出当前页面显示的汇总分析数据，包含总体统计和时间分布等信息，便于报告生成。</p>
                        <a href="{{ url_for('export_transactions_summary') }}" class="btn btn-success">
                            <i class="fas fa-download me-2"></i>导出汇总数据
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fas fa-chart-line me-2 text-info"></i>查看可视化报告</h5>
                        <p class="card-text">查看交易数据的可视化图表和分析报告，直观了解交易特征和趋势。</p>
                        <a href="{{ url_for('visualization') }}" class="btn btn-info">
                            <i class="fas fa-chart-bar me-2"></i>查看报告
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 时间分布表格 -->
<div class="card mb-4">
    <div class="card-header bg-info text-white">
        <h5 class="mb-0"><i class="fas fa-table me-2"></i>交易时间段分布</h5>
    </div>
    <div class="card-body">
        {% if time_distribution %}
        <div class="table-responsive">
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th>时间段</th>
                        <th>开始日期</th>
                        <th>结束日期</th>
                        <th>交易数量</th>
                        <th>占比</th>
                    </tr>
                </thead>
                <tbody>
                    {% for segment in time_distribution %}
                    <tr>
                        <td>{{ segment.segment }}</td>
                        <td>{{ segment.start_time }}</td>
                        <td>{{ segment.end_time }}</td>
                        <td>{{ segment.count }}</td>
                        <td>{{ (segment.count / total_transactions * 100)|round(2) }}%</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>暂无时间分布数据
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 时间分布图表
        {% if time_distribution %}
        const timeCtx = document.getElementById('timeDistributionChart').getContext('2d');
        const timeLabels = [{% for segment in time_distribution %}'{{ segment.start_time }} - {{ segment.end_time }}'{% if not loop.last %}, {% endif %}{% endfor %}];
        const timeCounts = [{% for segment in time_distribution %}{{ segment.count }}{% if not loop.last %}, {% endif %}{% endfor %}];
        
        new Chart(timeCtx, {
            type: 'bar',
            data: {
                labels: timeLabels,
                datasets: [{
                    label: '交易数量',
                    data: timeCounts,
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: '交易时间分布'
                    },
                    legend: {
                        display: true,
                        position: 'top'
                    }
                }
            }
        });
        {% endif %}
    });
</script>
{% endblock %}